<template>
  <view class="new_main">
    <scroll-view
      class="scroll_content"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="isRefreshing"
      refresher-background="#F6F7FB"
      @refresherrefresh="reload"
      @scrolltolower="loadMore"
    >
      <!-- <view class="top_perch">
        <image
          class="img"
          src="/static/img/exchange/top_perch.png"
          mode="scaleToFill"
        />
      </view> -->
      <view v-for="(item, index) in expertList" :key="index">
        <view class="expert_item" v-if="item.userinfo">
          <view class="left" @click="goHome(item)">
            <image
              class="avatar"
              v-if="item.userinfo"
              :src="item.userinfo.avatar"
              mode="aspectFill"
            ></image>
            <image
              class="avatar"
              v-else
              src="/static/img/exchange/icon_my.png"
              mode=""
            ></image>

            <view class="user_status">
              <view class="status_flag" v-if="item.is_online == 1">
                <view class="flag_dot1"></view>
                <view class="flag_text"> 在线 </view>
              </view>
              <view class="status_flag" v-if="item.is_online == 0">
                <view class="flag_dot3"></view>
                <view class="flag_text c999"> 离线 </view>
              </view>
              <view class="status_flag" v-if="item.is_online == 2">
                <view class="flag_dot2"></view>
                <view class="flag_text"> 忙碌 </view>
              </view>
            </view>
          </view>
          <view class="right">
            <view class="flex" @click="goHome(item)">
              <view class="name" v-if="item.userinfo">
                {{ item.userinfo.nickname }}
              </view>
              <image
                class="approve"
                src="/static/img/exchange/icon-rz.png"
                mode=""
              ></image>
            </view>
            <view class="flex" @click="goHome(item)">
              <view
                class="label"
                v-for="(item, index) in item.major_types.split(',').slice(0, 3)"
                :key="index"
              >
                {{ item }}
              </view>
            </view>
            <view
              class="goodAt ellipsis1"
              v-if="item.userinfo"
              @click="goHome(item)"
            >
              擅长：{{ item.userinfo.major_direction }}
            </view>

            <view class="bottom_info">
              <view class="money">
                <text class="money_num">{{ item.major_cost }}</text>
                积分
              </view>
              <view class="btn" @click="goAsk(item)">
                问专家
              </view>
            </view>
          </view>
        </view>
      </view>
      <uni-load-more :status="listStatus"></uni-load-more>
    </scroll-view>
  </view>
</template>

<script
  type="text/javascript"
  src="plus-confusion://../quiz/expertList/index"
></script>

<style lang="scss" scoped>
.new_main {
  background-color: #f6f6f6;
}

.scroll_content {
  height: 100vh;
  overflow: hidden;
}
.top_perch {
  width: 100%;

  .img {
    display: block;
    width: 100%;
    height: 150rpx;
  }
}

.expert_item {
  display: flex;
  margin-top: 20rpx;
  padding: 32rpx;
  width: 100%;
  min-height: 296rpx;
  background: #ffffff;

  .left {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-right: 20rpx;
    .avatar {
      width: 145rpx;
      height: 145rpx;
      border-radius: 6rpx;
    }

    .user_status {
      display: flex;
      height: 90rpx;
      margin-top: 14rpx;

      .status_flag{
        display: flex;
        align-items: center;
      }

      .flag_dot1 {
        width: 12rpx;
        height: 12rpx;
        background-color: #36ce50;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .flag_dot2 {
        width: 12rpx;
        height: 12rpx;
        background-color: #ff6161;
        border-radius: 50%;
        margin-right: 10rpx;
      }

      .flag_dot3 {
        width: 12rpx;
        height: 12rpx;
        background-color: #999999;
        border-radius: 50%;
        margin-right: 10rpx;
      }
    }
  }

  .right {
    width: 500rpx;

    .name{
      font-size: 32rpx;
      margin-right: 20rpx;
      font-weight: bold;
    }

    .approve {
      margin: 10rpx 0;
      width: 90rpx;
      height: 30rpx;
    }

    .label {
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 8rpx 0;
      padding: 20rpx;
      color: #999;
      min-width: 80rpx;
      height: 35rpx;
      white-space: nowrap;

      &:first-child {
        padding-left: 0rpx;
      }

      &:not(:last-child) {
        border-right: 1rpx solid #999999;
      }
    }

    .goodAt {
      width: 100%;
    }

    .bottom_info {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 36rpx;

      .money{
        font-size: 28rpx;
        color: #999999;

        .money_num {
          font-size: 30rpx;
          color: #333333;
          font-weight: bold;
          margin-right: 10rpx;
        }
      }

      .btn {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 160rpx;
        height: 60rpx;
        background: #edf6ff;
        border-radius: 74px;
        color: #1b6fff;
      }
    }
  }
}
</style>
